<template>
  <div class="change_admin">
    <el-dialog
      title="品势设置"
      class="gl_dialog_TitleLine"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :before-close="close"
      width="660px"
    >
      <div v-if="isSetting">
        <div v-for="(rtem, rndex) in roundOrder" :key="rndex">
          <p class="gl_fs_16 gl_ft_weight gl_pb_10 gl_mb_15" style="border-bottom: 1px solid #DCDFE6">{{ (rtem + 1) == 1 ? '决赛' : '第' + (rtem + 1) + '轮' }}</p>
          <el-form :ref="`form${rtem}`" :model="setPoomsaeDto" class="gl_form_mini" label-width="120px" label-position="right" style="padding-right: 30px;">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="请确认打几套" :prop="`${rtem}.count`" :rules="form_Rules.count">
                  <el-select v-model="setPoomsaeDto[rtem].count" size="mini" placeholder="请选择">
                    <el-option v-for="item in countList" :key="item" :value="item" :label="item" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="请选择品势章节" :prop="`${rtem}.poosaeSettingsId`" :rules="form_Rules.poosaeSettingsId">
                  <el-checkbox-group v-if="chapterLsit.length > 0" v-model="setPoomsaeDto[rtem].poosaeSettingsId" @change="changePoomsae(rtem)">
                    <el-checkbox v-for="(item, index) in chapterLsit" :key="index" :label="item.id">{{ item.name }}</el-checkbox>
                  </el-checkbox-group>
                  <span v-else>暂无章节数据，请先前去配置管理设置品势章节</span>
                </el-form-item>
              </el-col>
            </el-row>
            <p v-if="setPoomsaeDto[rtem].errorInfo" style="text-align:center; color:red">选择的品势章节数不能小于上述设置的数字</p>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="close()">取消</el-button>
        <el-button type="primary" size="mini" @click="saveNew('form')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import
{
  api_POST_EventsManagementEventSetPoomsae,
  api_GET_EventsManagementPoomsaeSetting
} from '@/extend/api/gameswaggerApi/app';
import {
  // SiSTKWEventsManagementEventSetPoomsaeDto,
  Api_GET_EventsManagementPoomsaeSettingQO
} from '@/lib/form/game/swaggerForm';
import validator from '@/lib/validate/index.js';
export default {
  name: 'ChapterSetting',
  props: {
    id: {
      type: Array,
      default: () => []
    },
    round: {
      type: Number,
      default: 1
    },
    categoryId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      setPoomsaeDto: {},
      Api_GET_EventsManagementPoomsaeSettingQO: new Api_GET_EventsManagementPoomsaeSettingQO(),
      dialogVisible: false,
      isSetting: false,
      errorInfo: false, // 控制错误提示信息
      chapterLsit: [],
      countList: [1, 2, 3, 4, 5, 6],
      roundOrder: [],
      form_Rules: {
        count: [
          validator.required('不可为空')
        ],
        poosaeSettingsId: [
          validator.required('品势章节不可为空')
        ]
      }
    };
  },
  created() {
    this.getPoom();
  },
  methods: {
    // 获取品势章节
    getPoom() {
      api_GET_EventsManagementPoomsaeSetting().then(res => {
        this.chapterLsit = res.items;
      });
    },
    changePoomsae(index) {
      if (this.setPoomsaeDto[index].poosaeSettingsId.length > 0) {
        this.$refs['form' + index][0].validate();
      }
      if (this.setPoomsaeDto[index].count <= this.setPoomsaeDto[index].poosaeSettingsId.length) {
        this.setPoomsaeDto[index].errorInfo = false;
      }
    },
    // 设置品势
    saveNew(formName) {
      var that = this;
      const _refForm = [];
      for (let i = 0; i < this.round; i++) {
        const _validateObj = {
          validate: null
        };
        that.$refs[`form${i}`][0].validate(valid => {
          if (valid) {
            if (that.setPoomsaeDto[i].poosaeSettingsId.length < that.setPoomsaeDto[i].count) {
              that.setPoomsaeDto[i].errorInfo = true;
              _validateObj.validate = false;
            } else {
              _validateObj.validate = true;
            }
          } else {
            _validateObj.validate = false;
          }
          _refForm.push(_validateObj);
        });
      }
      const _form = JSON.parse(JSON.stringify(that.setPoomsaeDto));
      if (_refForm.every((item) => { return item.validate === true; })) {
        const submitform = {
          categoryId: this.categoryId,
          eventsId: this.id,
          eventSetPoomsaeInfos: []
        };
        const arr = [];
        for (const i in _form) {
          const obj = {
            round: _form[i].round,
            count: _form[i].count,
            poosaeSettingsId: _form[i].poosaeSettingsId
          };
          arr.push(obj);
        }
        submitform.eventSetPoomsaeInfos = arr;
        api_POST_EventsManagementEventSetPoomsae(submitform).then(res => {
          that.dialogVisible = false;
          that.roundOrder = [];
          that.setPoomsaeDto = {};
          that.isSetting = false;
          that.$parent.getTableData();
        });
      }
    },
    open() {
      for (let i = 0; i < this.round; i++) {
        const item = i + 1;
        const obj = {
          round: item,
          count: '',
          poosaeSettingsId: [],
          errorInfo: false
        };
        const order = this.round - i - 1;
        this.roundOrder.push(order);
        this.$set(this.setPoomsaeDto, i, obj);
      }
      this.isSetting = true;
      this.dialogVisible = true;
      this.errorInfo = false;
    },
    close() {
      this.dialogVisible = false;
      this.roundOrder = [];
      this.setPoomsaeDto = {};
      this.isSetting = false;
    }
  }
};
</script>

